<template>
  <div id="Home_box">
    <Header
      id="sticky"
      :style="{ background: 'rgba(95, 204, 147, ' + Num + ')' }"
    ></Header>
    <Main></Main>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../components/header.vue";
import Main from "../components/Main.vue";
import Footer from "../components/footer.vue";

export default {
  name: "Home",
  components: {
    Header,
    Main,
    Footer,
  },
  data() {
    return {
      scroll: 0,
      Num: 0,
    };
  },
  mounted() {
    var _this = this;
    document.addEventListener(
      "scroll",
      function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        _this.Num = scrollTop / 30;
      },
      true
    );
  },
};
</script>

<style scoped>
#Home_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url(../assets/box.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#sticky {
  /* position: sticky; */
  top: 0;
  left: 0.17rem;
  z-index: 1111;
}
</style>
